<#include "/layout/layout.ftl"/>
<@body>
<link href="https://cdn.bootcss.com/bootstrap-table/1.14.2/bootstrap-table.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/bootstrap-table/1.14.2/bootstrap-table.min.js"></script>
<link href="https://cdn.bootcss.com/select2/4.0.8/css/select2.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/select2/4.0.8/js/select2.full.min.js"></script>

<div class="panel-body" style="padding-bottom:0px;">
    <div class="panel panel-default" >
        <div class="panel-heading">查询条件</div>
        <div class="panel-body" style="padding:2px">
            <form id="formSearch" class="form-horizontal">
                <div class="" style="margin-top:15px">
                    <div class="" style="margin-top:15px">
                        <label class="control-label col-sm-1" for="projectName">用户名</label>
                        <div class="col-sm-3">
                            <input type="text" class="form-control" id="projectName">
                        </div>
                        <div class="col-sm-4" style="text-align:left;">
                            <button type="button" style="margin-left:50px" id="btn_query" class="btn btn-primary btnFont"
                                    onclick="queryProject()">
                                查询
                            </button>
                        </div>
                    </div>
            </form>
        </div>
    </div>
    <div id="toolbar">
        <button id="btn_add" type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal" >
            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
        </button>
        <button id="btn_delete" type="button" class="btn btn-default" onclick="removeUserFromProject()">
            <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
        </button>
    </div>
    <table id="dataTable"></table>
    <input type="hidden" id="projectId" value="${projectId!}">
    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        新增项目成员
                    </h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label class="col-md-3">
                            选择用户:
                        </label>
                        <div class="col-md-9">
                            <select id="userId" style="width: 300px"  class="form-control"></select>

                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                    </button>
                    <button type="button" class="btn btn-primary" onclick="submitProjectMember()">
                        提交更改
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
</div>
<script>
    $.ajax({
        url:"/user/userList",
        method:"get",
        beforeSend:function () {
            $("#userId").empty();
        },
        success:function (result) {
            if(result.success){
                var userList =result.data;
                userList.forEach(function (user) {
                    var option ="<option value='"+user.id+"'>"+user.userName+"</option>"
                    $("#userId").append(option);
                })
                $("#userId").select2();
            }else {
                Ewin.alert(result.msg);
            }
        }
    });
    function removeUserFromProject(){
        var selections=  $("#dataTable").bootstrapTable("getSelections");
        if(selections.length <=0){
            Ewin.alert("至少要选择一条数据!");
            return;
        }
        var user =selections[0];
        var userId =user.id;
        var projectId =$("#projectId").val();
        Ewin.confirm({message:"确认要移出该成员吗?移出之后他将失去该项目的权限"}).on(function (e) {
            if(!e){
                return;
            }
            $.ajax({
                url:"/project/removeUserFromProject",
                method:"post",
                data:{
                    projectId:projectId,
                    userId:userId
                },success:function(result){
                    if(result.success){
                        $("#dataTable").bootstrapTable("refresh");
                    }else{
                        Ewin.alert(result.msg)
                    }
                }
            })
        })
    }
    $('#dataTable').bootstrapTable({
        url:"/project/projectMember", //请求后台的URL（*）
        method:"get", //请求方式（*）
        pageNumber: 1, ////初始化加载第一页，默认第一页
        pageSize: 10, //每页的记录行数（*）
        pageList: [5, 10, 20, 50, 100], //可供选择的每页的行数（*）
        pagination: true, //是否显示分页（*）
        sidePagination: "server", //分页方式:client客户端分页,server服务端分页（*）
        queryParams: param, //传递参数（*）
        cache:false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
        clickToSelect:true,
        singleSelect:true,
        columns:[
            {
                checkbox:true
            },
            {
                "title":"用户id",
                "field":"id"
            },
            {
                "title":"用户名称",
                "field":"userName"
            }
        ],
        height:500,
        responseHandler:function (res) {
            // res =ResponseMessage
            // res.data = tablePage
            return res.data;
        }

    })
    function param(params) {

        var temp = {
            projectId:$("#projectId").val(),
            pageSize: params.limit,
            pageNum: (params.offset / params.limit) + 1 //需要计算页数固定写法
        };
        return temp;
    }
    function submitProjectMember(){
        var url ="/project/addProjectMember";
        var userId = $("#userId").val();
        var projectId =$("#projectId").val();
        $.ajax({
            url:url,
            method:"post",
            data:{
                userId:userId,
                projectId:projectId
            },
            //success回调，相当于java里面的返回值
            success:function (responseMessage) {
                if(responseMessage.success){
                    $("#myModal").modal('hide');
                    $("#dataTable").bootstrapTable('refresh');
                }else {
                    Ewin.alert(responseMessage.msg)
                }
            }
        })
    }
</script>
</@body>